<template>
  <div class="form-item" :style="columnItem.styleProps || undefined">
    <n-input
      v-if="columnItem.formType === 'input'"
      :allow-input="inputValueFilter(columnItem.isInt)"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @change="handleChange($event, columnItem)"
    />
    <n-input
      v-if="columnItem.formType === 'textarea'"
      type="textarea"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @change="handleChange($event, columnItem)"
    />
    <n-select
      v-if="columnItem.formType === 'select'"
      v-bind="columnItem"
      :options="getSelectOptions(columnItem)"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />

    <!-- 要用到的建议用render自己实现，容易还省事 -->
    <!-- <n-upload v-if="columnItem.formType === 'upload'" v-bind="columnItem">
      <n-button>Upload file</n-button>
    </n-upload> -->

    <!-- <n-auto-complete
      v-if="columnItem.formType === 'auto-complete'"
      v-model:value="model.autoCompleteValue"
      :options="autoCompleteOptions"
      placeholder="Email"
    /> -->

    <!-- <n-dynamic-tags
      v-model:value="model.dynamicTagsValue"
      v-if="columnItem.formType === 'dynamic-tags'"
    /> -->

    <n-tree-select
      v-if="columnItem.formType === 'treeSelect'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      :options="getSelectOptions(columnItem)"
      @update:value="handleChange($event, columnItem)"
    />

    <n-cascader
      v-if="columnItem.formType === 'cascader'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />
    <n-date-picker
      v-if="columnItem.formType === 'date'"
      v-bind="columnItem"
      v-model:formatted-value="model[columnItem.key]"
      @update:formatted-value="handleChange($event, columnItem)"
    />
    <n-switch
      v-if="columnItem.formType === 'switch'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />
    <n-checkbox
      v-if="columnItem.formType === 'checkbox'"
      v-bind="columnItem"
      v-model:checked="model[columnItem.key]"
      @update:checked="handleChange($event, columnItem)"
    >
      <!-- render -->
      <component
        v-if="columnItem.renderContent"
        :is="columnItem.renderContent"
      />
      <!-- 字符串 -->
      <template v-else-if="columnItem.content">
        {{ columnItem.content }}
      </template>
      <!-- 默认 -->
      <template v-else>checkBox</template>
    </n-checkbox>
    <n-checkbox-group
      v-if="columnItem.formType === 'checkboxGroup'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    >
      <component
        v-if="columnItem.renderContent"
        :is="columnItem.renderContent"
      />
      <n-space v-else>
        <n-checkbox value="Option 1">Option 1</n-checkbox>
        <n-checkbox value="Option 2">Option 2</n-checkbox>
        <n-checkbox value="Option 3">Option 3</n-checkbox>
        <n-checkbox value="Option 4">Option 4</n-checkbox>
      </n-space>
    </n-checkbox-group>
    <n-radio
      v-if="columnItem.formType === 'radio'"
      v-bind="columnItem"
      v-model:checked="model[columnItem.key]"
      @update:checked="handleChange($event, columnItem)"
    >
      <component
        v-if="columnItem.renderContent"
        :is="columnItem.renderContent"
      />
      <template v-else-if="columnItem.content">
        {{ columnItem.content }}
      </template>
      <template v-else>Definitely Maybe</template>
    </n-radio>

    <n-radio-group
      v-if="columnItem.formType === 'radioGroup'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    >
      <component
        v-if="columnItem.renderContent"
        :is="columnItem.renderContent"
      />
      <template v-else>
        <n-radio value="Radio 1">Radio 1</n-radio>
        <n-radio value="Radio 2">Radio 2</n-radio>
        <n-radio value="Radio 3">Radio 3</n-radio>
        <n-radio value="Radio 4">Radio 4</n-radio>
      </template>
    </n-radio-group>

    <n-input-number
      v-if="columnItem.formType === 'inputNumber'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />

    <n-time-picker
      v-if="columnItem.formType === 'time'"
      v-bind="columnItem"
      v-model:formatted-value="model[columnItem.key]"
      @update:formatted-value="handleChange($event, columnItem)"
    />

    <n-color-picker
      v-if="columnItem.formType === 'color'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />

    <n-slider
      v-if="columnItem.formType === 'slider'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />

    <n-transfer
      v-if="columnItem.formType === 'transfer'"
      v-bind="columnItem"
      v-model:value="model[columnItem.key]"
      @update:value="handleChange($event, columnItem)"
    />
  </div>
</template>

<script lang="ts" setup name="formItem">
  import { FormItemProps, SelectForm, TreeSelectForm } from '../type'

  interface column {
    columnItem: FormItemProps
    model: any
  }

  const props = withDefaults(defineProps<column>(), {})
  const emit = defineEmits(['formItemChange'])

  const { model } = toRefs(props)
  // console.log('columnItem', props.columnItem)
  /**
   * @description: 抛出更新事件
   * @param {*} value
   * @param {*} item
   * @return {*}
   */
  const handleChange = (value, item: FormItemProps) => {
    if (item.formType === 'date' || item.formType === 'time') {
      model.value[item.key] = value
    } else if (item.formType === 'input') {
      // 格式化小数 默认两位小数
      if (item.isDouble) {
        const valueTrim = value.trim ? value.trim() : value
        if (valueTrim !== '') {
          if (!isNaN(valueTrim)) {
            // value的值不为空且为数字 格式化得到小数
            model.value[item.key] = parseFloat(valueTrim).toFixed(
              item?.doubleCount || 2
            )
            // 格式不对，直接置空
          } else model.value[item.key] = ''
        }
      }
    } else {
      model.value[item.key] = value.trim ? value.trim() : value
    }
    emit('formItemChange', model.value[item.key], item)
  }
  /**
   * @description: 获取select字典
   * @param {*} item
   * @return {*}
   */
  const getSelectOptions = (item: SelectForm | TreeSelectForm) => {
    if (item.dictCode) return useDictData(item.dictCode).value
    else if (item.options) return item.options
    else return []
  }
  /**
   * @description: 是否只允许输入正数
   * @param {*} isInt
   * @return {*}
   */
  const inputValueFilter = (isInt = false) => {
    if (isInt) return (value) => !value || /^\d+$/.test(value)
    return () => true
  }
</script>

<style lang="less" scoped>
  .form-item {
    width: 100%;
  }
</style>
